<template>
	<view>
		<u-popup v-model="shows" mode="bottom" height="600px" :mask-close-able="false">


			<view class="foo-li" style="padding-bottom: 60rpx;">
				<view class="close-img" @click="close">
					x
				</view>
				<!-- <image  class="close-img" :src="close1" mode=""></image> -->
				<view class="popup-content" :style="{'backgroundImage':`url(${poprp4})`}">
					<view class="popup-title">
						开通会员
					</view>
					<view class="p-title">
						选择会员类型
					</view>


				</view>
				<view class="q-list">
					<view class="p-cards" v-for="(item,index) in card" :key="index" @click="memberBtn(item,index)">
						<view class="p-cards-l">
							<image class="p-cards-l-img" :src="icon10" mode=""></image>
						</view>
						<view class="p-cards-c">
							<view class="qo">
								<text class="qo-t1">{{item.title}}</text><text class="qo-t2">有效期：{{item.days}}天</text>
							</view>
							<view class="">
								<text class="qo-t3">￥{{item.price}}</text>
								<view class="qo-t4">
									<view class="qo-t5">

									</view>
									<view class="qo-t6">￥{{item.price+100}}</view>
								</view>
							</view>
							<view class="qo-t2" style="margin-left: 0;">
								{{item.dec}}
							</view>
						</view>
						<view class="p-cards-r">
							<image v-if="meberShow == index" class="p-cards-r-img" :src="icon12" mode=""></image>
							<image v-else class="p-cards-r-img" :src="icon11" mode=""></image>

						</view>
					</view>
				</view>
				<view class="p-title">
					填写您的个人信息
				</view>
				<view class="li-list">
					<view class="li-lists">
						<text class="li-lists-text">姓名：</text>
						<input class="li-lists-ipt" v-model="name" type="text" placeholder="请输入您的姓名" />
					</view>
					<view class="li-lists">
						<text class="li-lists-text">电话：</text>
						<input class="li-lists-ipt" v-model="phone" type="text" placeholder="请输入您的号码" disabled />
						<button v-if="!phone" class="phone-btn" open-type="getPhoneNumber"
							@getphonenumber="handlePhone">授权</button>
					</view>
					<view class="li-lists">
						<text class="li-lists-text">邀请码：</text>
						<input class="li-lists-ipt" v-model="Invitation" type="text" placeholder="请输入邀请码（选填）：" />
					</view>
				</view>
				<view class="p-title">
					开通有礼
				</view>
				<view class="tip">
					<view class="tip-text" v-for="item in text" :key="item">
						{{item}}
					</view>
				</view>
				<view class="button">
					<view class="button-one">
						合计：
					</view>
					<view class="button-two">
						￥{{price}}
					</view>
					<view class="button-three" @click="payFn">
						立即购买
					</view>
				</view>
			</view>

		</u-popup>
	</view>
</template>

<script>
	import {
		log
	} from 'util';

	export default {
		components: {

		},
		data() {
			return {
				show: false,
				card: [],
				text: [],
				meberShow: 0, //选中状态
				price: '',
				name: '',
				Invitation: '',
				content: '东临碣石，以观沧海',
				phone: '',
				content: '东临碣石，以观沧海',
				capsuleTop: uni.getMenuButtonBoundingClientRect().top + 35.5 + 'px',
				icon: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member12.png',
				icon1: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member7.png',
				icon2: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member2.png',
				icon3: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member8.png',
				icon4: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member4.png',
				icon5: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member5.png',
				icon6: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member14.png',
				icon7: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member15.png',
				icon8: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member1.png',
				icon9: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member6.png',
				icon15: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member3.png',
				icon10: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/member2/1.png',
				icon11: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/member2/2.png',
				icon12: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/member2/3.png',

				poprp1: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member13.png',
				poprp2: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member10.png',
				poprp3: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member9.png',
				poprp4: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/member2/4.png',
				close1: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user18.png',
			}
		},
		onLoad() {

		},
		onShow() {

		},
		props: {
			shows: {
				type: Boolean,
				default: false,
			}
		},
		watch: {
			shows(newVal) {
				if (newVal == true) {
					this.getIndex();
				}

			},
		},
		methods: {
			memberBtn(item, index) {
				this.meberShow = index;
				this.price = item.price;
			},
			close() {
				this.$emit('close1')
			},
			memberfn() {
				this.shows = true;
			},
			open() {
				this.show = true;
			},
			payFn() {
				if (!this.name) {
					new this.$Toast('请填写姓名').showtoast()
				} else if (!this.phone) {
					new this.$Toast('授权获取手机号').showtoast()
				} else {
					this.paymentRequest();
				}
			},
			//获取首页信息
			async getIndex() {
				try {
					let data = await new this.Request(this.Urls.m().member).modepost();
					console.log(data, 'data');
					this.card = data.data.card;
					this.phone = data.data.user.phone;
					this.price = this.card[this.meberShow].price;
					this.text = data.data.text;
				} catch (e) {
					console.log(e, 'e')

				}

			},
			//微信支付
			paymentRequest() {
				uni.login({
					provider: 'weixin',
					success: ret => {
						let code = ret.code; //增加code参数
						//create order
						this.payCheck(code);

					}
				});

			},
			async payCheck(codes) {
				let code = {
					code: codes,
					payee: (this.card[this.meberShow].price * 100).toString(),
					type: this.card[this.meberShow].id,
					name: this.name,
					phone: this.phone,
					Invitation: this.Invitation,
					store: '1'
				}
				let data = await new this.Request(this.Urls.m().check, code).modepost();

				if (data.code == 0) {
					let resOrderId = data.data.orderid;
					if (resOrderId) {
						uni.requestPayment({
							//微信
							provider: 'wxpay',
							timeStamp: data.data.timeStamp,
							nonceStr: data.data.nonceStr,
							package: data.data.package,
							signType: 'MD5',
							paySign: data.data.paySign,


							success: (resultData) => {
								//Check if payment is successful
								//支付接口
								this.modifyAdd(resOrderId);


							},
							fail: () => {
								new this.$Toast('支付失败！').showtoast()
							}
						});
					};
				} else {
					new this.$Toast('支付失败！').showtoast()
				};

			},
			async modifyAdd(resOrderId) {
				let obj = {
					orderid: resOrderId
				}
				try {
					let data = await new this.Request(this.Urls.m().check_pay, obj).modepost();
					if (data.code == 0) {
						new this.$Toast('购买成功！').showtoast();
						this.$emit('successMember');
						this.show = false;
					} else {
						new this.$Toast(data.msg).showtoast();
					}
				} catch (e) {
					console.log(e, 'e')

				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-title {
		text-align: center;
		margin: 40rpx auto;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		line-height: 38rpx;
	}

	.popup-content {
		overflow: hidden;
		width: 100%;
		height: 260rpx;
		background: no-repeat;
		background-size: 100% 100%;
	}

	.p-title {
		margin: 30rpx 0 0 27rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.p-cards {
		margin-top: 60rpx;
		margin-left: 24rpx;
		display: flex;
	}

	.p-cards-l {
		margin-left: 29rpx;
		width: 124rpx;
		height: 124rpx;
	}

	.p-cards-l-img {
		width: 124rpx;
		height: 124rpx;
	}

	.p-cards-r {
		margin: 40rpx 56rpx 0 0;
		width: 48rpx;
		height: 48rpx;
	}

	.p-cards-r-img {
		width: 48rpx;
		height: 48rpx;
	}

	.p-cards-c {
		margin-left: 20rpx;
		flex: 1;
	}

	.qo {
		margin-top: 20rpx;
	}

	.qo-t1 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.qo-t2 {
		margin-left: 59rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.qo-t3 {
		font-size: 42rpx;
		font-family: DIN;
		font-weight: bold;
		color: #FF1D4D;
	}

	.qo-t4 {
		position: relative;
		display: inline-block;
	}

	.qo-t5 {
		position: absolute;
		top: 20rpx;
		right: 0;
		width: 80rpx;
		height: 1rpx;
		border: 1px solid #333333;
	}

	.qo-t6 {
		margin-left: 20rpx;
		font-size: 30rpx;
		font-family: DIN;
		font-weight: bold;
		color: #333333;
	}

	.q-list {
		margin-top: -80rpx;
	}

	.li-lists {
		display: flex;
		overflow: hidden;
		margin: 28rpx auto 0;
		width: 639rpx;
		height: 90rpx;
		background: #F2F1F8;
		border-radius: 16rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		line-height: 90rpx;
	}

	.li-lists-ipt {
		display: inline-block;
		margin: 20rpx 0 0;
		color: #333333;
	}

	.li-lists-text {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		margin-left: 20rpx;
	}

	.tip-text {
		margin: 23rpx 0 0 57rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.foo-li {
		position: relative;
	}

	.button {
		display: flex;
		margin: 60rpx 0 0 0;
		padding: 30rpx 26rpx 0;
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -9rpx 14rpx 0rpx rgba(134, 134, 134, 0.15);
	}

	.button-one {
		height: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 80rpx;
	}

	.button-two {
		height: 80rpx;
		flex: 1;
		font-size: 42rpx;
		font-family: DIN;
		font-weight: bold;
		color: #FF1D4D;
		line-height: 80rpx;
	}

	.button-three {
		width: 264rpx;
		height: 80rpx;
		background: #F5D792;
		border-radius: 40rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		text-align: center;
		line-height: 80rpx;
	}

	.phone-btn {
		margin-top: 20rpx;
		width: 120rpx;
		height: 56rpx;
		border: 2px solid #34C8E8;
		border-radius: 28rpx;
		text-align: center;
		line-height: 56rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #4CCFEB;
	}

	.close-img {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		font-size: 60rpx;
		width: 40rpx;
		height: 40rpx;
	}
</style>